<template>
  <div class="box">
      <Nav @isStatus="addModalShow" :getData="getData" @searchCh="searchCh" @searchPC="searchPC"></Nav>
      <Table :list="lists" :getData="getData"></Table>
      <Pagenation :totalPage="totalPage" @currPageC="currPageC" :currentPage="pageconfig.currentPage"></Pagenation>
      <AddModal v-show="status" @modalHides="addModalHide" :getData="getData"></AddModal>
    
  </div>
</template>
<script>
import Nav from './Nav'
import axios from 'axios'
import Table from './Table.vue'
import AddModal from './AddModal.vue'
import Pagenation from './Pagenation.vue'
  export default {
    components:{
      Nav,
      Table,
      AddModal,
      Pagenation
    },
    data(){
      return{
        list:{},
        status:false,
        pageconfig:{
          currentPage:1,
          pageSize:4
        },
        totalPage:'',
        search:'',
        lists:''
      }
    },
    methods:{
      currPageC(val){
        this.pageconfig.currentPage = val
        this.getData()
      },
      //请求数据 刷新页面
      getData(){
         axios.get('http://localhost/api.php/jqsystems',{
             params:{
                 transform:1,
                 order:'id,desc',
                 page:this.pageconfig.currentPage+','+this.pageconfig.pageSize,
                 filter:'name,cs,'+this.search
            }
         })
          .then((response)=>{
           this.list = response.data.jqsystems
           this.lists = JSON.parse(JSON.stringify(this.list))
          this.totalPage=Math.ceil(response.data._results/this.pageconfig.pageSize)
          })
          .catch((error)=>{
            // console.log(error)
          })
      },
      addModalShow(val){
        let that = this
        that.status = val
      },
      addModalHide(val){
         let that = this
         that.status = val
      },
      searchCh(val){
        this.search=val
      },
      searchPC(val){
        this.pageconfig.currentPage = val
      }
    },
    mounted(){
      this.getData()
    }
  }
</script>
<style>
 .box{
   width: 1200px;
   margin:0 auto;
 }
 button{
   padding: 6px 10px;
   border:none;
   outline: none;
   background: #777;
   border-radius: 4px;
    color: #fff;
 }
  button:hover{
    background: #333;
 
  }
</style>


